{include file="common:head" /}

<link rel="stylesheet" type="text/css" href="__STATIC__/index/css/video.css">
<style>
	.txt-only{display:none;}
	.over-hide{white-space:inherit}
	</style>
<body>
<div class="index-content">
	<!-- 头部 -->
	{include file="common:header" /}

	<!-- 图 -->
	<div class="video-con width1300">
		<div class="videoDiv">
			<div class="swiper-container">
				<div class="swiper-wrapper" id="father">
					{volist name="video_banner" id = "item"}
					<div class="swiper-slide">
						<img class="videoMax" src="{$item.img}" alt="">
					</div>
					{/volist}

				</div>
				<!-- 如果需要导航按钮 -->
				<div class="swiper-button-prev"></div>
				<div class="swiper-button-next"></div>
			</div>

		</div>
		<div class="videoList">
			<ul>
				{volist name="video_banner" id = "item"}
				<li class="light over-hide" style="font-size:16px;"><span class="light-box"></span>
					<a href="{$item.click_url}" style="color: #fff;">{$item.title}</a></li>
				{/volist}

			</ul>
		</div>
	</div>
	<!-- 轮播图 -->
	<!-- 热门节目 -->
	<div class="program width1300">
		<div class="title">热门节目
			<span style="font-size: 16px;" class="more fr" onclick="openwin('{:url(\'index/video/video_square\')}')">更多
				<img style="margin:0 0 -2px 0" src="__STATIC__/index/img/jiantou1.png" alt=""></span>
		</div>
		<div class="swiper-container2">
			<div class='swiper-wrapper'>
				<div class="hot clearfix swiper-slide">
					<div class="hot-one fl" onclick="openwin('{:url(\'index/video/video_detail\')}' + '?id=' + {$hot_video[0]['id']})">
						{if $hot_video[0]['image'] neq ''}
							<img src="{$hot_video[0]['image']}" alt="" class="hot-play">
						{/if}
					</div>

					<div class="hot-two fl" >
						{volist name="hot_video" id="vo" offset="1" length='4'}
						<div class="hot-con fl" onclick="openwin('{:url(\'index/video/video_detail\')}' + '?id=' + {$vo['id']})">
							{if $hot_video[1]['image'] neq ''}
								<img class="hot-play2" src="{$vo['image']}" alt="{$hot_video[4]['title']}">
							{/if}
						</div>
						{/volist}
<!--						<div class="hot-con fl" onclick="openwin('{:url(\'index/video/video_detail\')}' + '?id=' + {$hot_video[2]['id']})">-->
<!--							{if $hot_video[2]['image'] neq ''}-->
<!--								<img class="hot-play2" src="{$hot_video[2]['image']}" alt="{$hot_video[4]['title']}">-->
<!--							{/if}-->
<!--						</div>-->
<!--						<div class="hot-con fl" onclick="openwin('{:url(\'index/video/video_detail\')}' + '?id=' + {$hot_video[3]['id']})">-->
<!--							{if $hot_video[3]['image'] neq ''}-->
<!--								<img class="hot-play2" src="{$hot_video[3]['image']}" alt="{$hot_video[4]['title']}">-->
<!--							{/if}-->
<!--						</div>-->
<!--						<div class="hot-con fl" onclick="openwin('{:url(\'index/video/video_detail\')}' + '?id=' + {$hot_video[4]['id']})">-->
<!--							{if $hot_video[4]['image'] neq ''}-->
<!--								<img class="hot-play2" src="{$hot_video[4]['image']}" alt="{$hot_video[4]['title']}">-->
<!--							{/if}-->
<!--						</div>-->
					</div>
				</div>


				{notempty name="$hot_video[5]['image']"}
				<div class="hot clearfix swiper-slide">

					{if $hot_video[5]['image'] neq ''}
					<div class="hot-one fl" onclick="openwin('{:url(\'index/video/video_detail\')}' + '?id=' + {$hot_video[5]['id']})">
						<img class="hot-play" src="{$hot_video[5]['image']}" alt="{$hot_video[5]['title']}">
					</div>
					{/if}

					<div class="hot-two fl" >

						{volist name="hot_video" id="vo" offset="6" length='4'}
						<div class="hot-con fl" onclick="openwin('{:url(\'index/video/video_detail\')}' + '?id=' + {$vo['id']})">
							{if $vo['image'] neq ''}
							<img class="hot-play2" src="{$vo['image']}" alt="{$hot_video[4]['title']}">
							{/if}
						</div>
						{/volist}
					</div>
				</div>
				{/notempty}


				{notempty name="$hot_video[10]['image']"}
				<div class="hot clearfix swiper-slide">

					{if $hot_video[10]['image'] neq ''}
					<div class="hot-one fl" onclick="openwin('{:url(\'index/video/video_detail\')}' + '?id=' + {$hot_video[5]['id']})">
						<img class="hot-play" src="{$hot_video[5]['image']}" alt="{$hot_video[5]['title']}">
					</div>
					{/if}

					<div class="hot-two fl" >

						{volist name="hot_video" id="vo" offset="11" length='4'}
						<div class="hot-con fl" onclick="openwin('{:url(\'index/video/video_detail\')}' + '?id=' + {$vo['id']})">
							{if $vo['image'] neq ''}
							<img class="hot-play2" src="{$vo['image']}" alt="{$hot_video[4]['title']}">
							{/if}
						</div>
						{/volist}
					</div>
				</div>
				{/notempty}
			</div>

			<div class="swiper-button-prev"></div>
			<div class="swiper-button-next"></div>
		</div>
	</div>


	<!-- 高级私人定制 -->
	<div class="personal width1300">
		<div class="title">
			<span>高级私人定制</span>
			<span class="more fr" onclick="openwin('{:url(\'index/video/video_square\')}')">更多  <img style="margin:0 0 -2px 0" src="__STATIC__/index/img/jiantou1.png" alt=""></span>

		</div>
		<div class="content clearfix">
			{volist name="private_video" id = "item"}
			<div class="con-one fl" onclick='window.location.href="video_detail?id={$item.id}"' >
				<img class="car-play" src="{$item.image}" />
				<div class="txt">
					<p class="over-hide">{$item.title}</p>
					<p class="txt-only" >{$item.desc}</p>
				</div>
			</div>
			{/volist}
		</div>
	</div>

	<!-- 原创精选 -->
	<div class="personal width1300">
		<div class="title">
			<span>原创精选</span>
			<span class="more fr" onclick="openwin('{:url(\'index/video/video_square\')}')">更多 <img style="margin:0 0 -2px 0" src="__STATIC__/index/img/jiantou1.png" alt=""></span>
		</div>
		<div class="content clearfix">
			{volist name="original_video" id = "item"}
			<div class="con-one fl" onclick="openwin('{:url(\'/video_detail\')}' + '?id=' + {$item.id})">
				<img class="car-play" src="{$item.image}" />
				<div class="txt">
					<p class="over-hide">{$item.title}</p>
					<p class="txt-only">{$item.desc}</p>
				</div>
			</div>
			{/volist}
		</div>
	</div>


	{include file="common:footer" /}
</div>
<script type="text/javascript" src="__STATIC__/index/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="__STATIC__/index/js/swiper.min.js"></script>
<script type="text/javascript" src="__STATIC__/index/js/common.js"></script>
<script type="text/javascript" src="__STATIC__/index/js/header_move.js"></script>

<script type="text/javascript">

	var swiper = new Swiper('.swiper-container', {
		autoplay:false,
		autoplay: {
			disableOnInteraction: false,
		},
		loop:true,
		initialSlide:0,
		navigation: {
			nextEl: '.swiper-button-next',
			prevEl: '.swiper-button-prev',
		},
		on: {
			slideChangeTransitionStart: function(){
				console.log(this.activeIndex)
				$(".videoList ul li").eq(this.activeIndex-1).addClass('light').siblings().removeClass('light');
				if(this.activeIndex > $(".videoList ul li").length){
					swiper.init();
					return false;
				}
			},
		},
	});

	$('.videoList ul li').mouseover(function(){
		$(this).addClass('light').siblings().removeClass('light');
		var i = $(this).index(); //index() 方法返回指定元素相对于其他指定元素的 index 位置。
		swiper.slideTo(i+1,0,false);//点击右侧列表，改变轮播图中的图片；
		return false;
	})

	var swiper2 = new Swiper('.swiper-container2', {
		autoplay:false,
		loop:true,
		navigation: {
			nextEl: '.swiper-button-next',
			prevEl: '.swiper-button-prev',
		},
	});

</script>
</body>
</html>
